<template>
  <div style="margin: 15px" class="pay">
    <el-card>
      <div slot="header" style="margin: 0px 0px 5px 0px">
        <span style="display: flex; align-items: center; font-size: 18px">
          <img
            src="@/assets/img/txjl.png"
            style="width: 20px; margin-right: 5px"
          />
          {{headName}}打款记录</span
        >
      </div>
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <!-- 发佣记录 -->
        <el-tab-pane label="发佣记录" name="Commission">
          <!-- 查询表单 -->
          <div style="margin: 20px 0px 0px -10px; padding-bottom: 15px">
            <el-form :inline="true" label-position="right" label-width="80px">
              <el-form-item label="日期范围">
                <el-date-picker
                  v-model="CommissionData.field103"
                  style="width: 200px; margin-right: 30px"
                  value-format="yyyy-MM-dd"
                  type="daterange"
                  range-separator="至"
                  clearable
              
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                >
                </el-date-picker>
              </el-form-item>

              <el-form-item label="手机号">
                <el-input
                  v-model="CommissionData.mobile"
                  placeholder="请输入手机号"
                  :maxlength="11"
                  show-word-limit
                  clearable
                  style="margin-right: 30px; width: 200px"
                ></el-input>
              </el-form-item>
              <el-form-item label="用户名称">
                <el-input
                  v-model="CommissionData.field104"
                  placeholder="请输入用户名称"
                  :maxlength="30"
                  clearable
                  style="margin-right: 30px; width: 200px"
                ></el-input>
              </el-form-item>

              <el-form-item label="用户昵称">
                <el-input
                  v-model="CommissionData.field106"
                  placeholder="请输入用户昵称"
                  :maxlength="30"
                  clearable
                  style="margin-right: 30px; width: 200px"
                ></el-input>
              </el-form-item>

              <el-form-item label="提现状态">
                <el-select
                  v-model="CommissionData.field107"
                  placeholder="请选择提现状态"
                  clearable
                  filterable
                  style="margin-right: 30px; width: 200px"
                >
                  <el-option
                    v-for="(item, index) in field107Options"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                    :disabled="item.disabled"
                  ></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="渠道名称">
                <el-input
                  v-model="CommissionData.field108"
                  placeholder="请输入渠道名称"
                  :maxlength="30"
                  clearable
                  style="margin-right: 30px; width: 200px"
                ></el-input>
              </el-form-item>

              <el-form-item label="收款户名">
                <el-input
                  v-model="CommissionData.field109"
                  placeholder="请输入收款户名"
                  :maxlength="30"
                  clearable
                  style="margin-right: 30px; width: 200px"
                ></el-input>
              </el-form-item>

              <el-form-item label="收款账户">
                <el-input
                  v-model="CommissionData.field110"
                  placeholder="请输入收款账户"
                  :maxlength="30"
                  clearable
                  style="margin-right: 30px; width: 200px"
                ></el-input>
              </el-form-item>
              <el-form-item label="身份证号">
                <el-input
                  v-model="CommissionData.field111"
                  placeholder="请输入身份证号"
                  :maxlength="18"
                  clearable
                  style="margin-right: 30px; width: 200px"
                ></el-input>
              </el-form-item>

              <!-- <el-form-item label="" style="margin-left:110px">
             <el-button
              icon="el-icon-refresh"
              style="background: #eeeeee; color: #6396f4; font-weight: bold"
              @click="resetQuery"
              >重置
            </el-button>
            <el-button type="primary" icon="el-icon-search" @click="getList"
              >搜索</el-button
            >
          </el-form-item> -->
            </el-form>
            <div style="display: flex; justify-content: center">
              <el-button
                icon="el-icon-refresh"
                style="background: #eeeeee; color: #6396f4; font-weight: bold"
                @click="CommissionBottonForm"
                >重置
              </el-button>
              <el-button type="primary" icon="el-icon-search" @click="getData"
                >搜索</el-button
              >
            </div>
          </div>

          <el-divider></el-divider>
          <!-- 数据展示 -->
          <el-card style="height: 150px; margin-top: 10px">
            <div
              style="
                display: flex;
                height: 100%;
                justify-content: space-between;
              "
            >
              <div class="pay-item">
                <div class="pay-value" style="color: red">
                  <span>￥</span>
                  {{ paramData.balance || 0 }}
                </div>
                <div class="pay-label">账户余额(元)</div>
              </div>
              <div class="pay-item">
                <div class="pay-value">
                  <span>￥</span>
                  {{ paramData.count || 0 }}
                </div>
                <div class="pay-label">本月完成打款笔数</div>
              </div>
              <div class="pay-item">
                <div class="pay-value">
                  <span>￥</span>
                  {{ paramData.totalMoney || 0 }}
                </div>
                <div class="pay-label">本月完成打款(元)</div>
              </div>

              <!-- <div class="pay-item">
            <div class="pay-value value-color">
              <span>￥</span>
              {{ remaining }}
            </div>
            <div class="pay-label">剩余未提现(元)</div>
          </div> -->
            </div>
          </el-card>
          <el-divider></el-divider>
          <!-- tab-表格 -->
          <div style="margin: 20px 0px">
            <div class="exportButton">
              <!-- <el-button
                icon="el-icon-upload2"
                @click="withdrawExport"
                style="margin-bottom: 10px; background: #f5f5f5"
                >导出</el-button
              > -->
            </div>
            <el-table :data="roleList" height="500">
              <el-table-column
                label="提现时间"
                prop="crashTime"
                align="center"
                width="150"
              >
                <template slot-scope="scope">
                  <span>{{ scope.row.crashTime || "暂无" }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="用户名称"
                prop="userName"
                align="center"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <span>{{ scope.row.userName || "暂无" }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="用户昵称"
                prop="nickName"
                align="center"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <span>{{ scope.row.nickName || "暂无" }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="提现渠道"
                prop="withdrawalType"
                align="center"
                :show-overflow-tooltip="true"
              >
                <template slot-scope="scope">
                  <span v-show="scope.row.withdrawalType == '0'">记账本</span>
                  <span v-show="scope.row.withdrawalType == '1'">银行卡</span>
                  <span v-show="scope.row.withdrawalType == '2'">支付宝</span>
                </template>
              </el-table-column>

              <el-table-column
                label="渠道名称"
                prop="channelName"
                align="center"
                :show-overflow-tooltip="true"
              >
                <template slot-scope="scope">
                  <span>{{ scope.row.channelName || "暂无" }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="提现金额/元"
                prop="amount"
                align="center"
                :show-overflow-tooltip="true"
              />
              <el-table-column
                label="收款户名"
                prop="accountName"
                align="center"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <span>{{ scope.row.accountName || "暂无" }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="收款账户"
                prop="accountNo"
                align="center"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <span>{{ scope.row.accountNo || "暂无" }}</span>
                </template>
              </el-table-column>

              <el-table-column
                label="身份证号"
                prop="idCard"
                align="center"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <span>{{ scope.row.idCard || "暂无" }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="预留手机号"
                prop="phone"
                align="center"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <span>{{ scope.row.phone || "暂无" }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="提现状态"
                align="center"
                prop="withdrawalStatus"
              >
                <!-- <template slot-scope="scope">
                  <span v-show="scope.row.withdrawalStatus == 'SUCCESS'"
                    >成功</span
                  >
                  <span v-show="scope.row.withdrawalStatus == 'fail'"
                    >失败</span
                  >
                  <span v-show="scope.row.withdrawalStatus == '转帐中'"
                    >转帐中</span
                  >
                </template> -->
              </el-table-column>
              <el-table-column
                label="提现信息"
                prop="callbackMessage"
                align="center"
              >
                <template slot-scope="scope">
                  <span>{{ scope.row.callbackMessage || "暂无" }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="手续费"
                prop="commissionAmount"
                align="center"
              />
              <el-table-column
                label="实际到账金额"
                prop="realityAmount"
                align="center"
              />
            </el-table>
          </div>
          <pagination
            style="margin-bottom: 20px"
            :total="total"
            :page.sync="CommissionData.pageNum"
            :limit.sync="CommissionData.pageSize"
            @pagination="getData"
          />
        </el-tab-pane>
        <!-- 充值记录 -->
        <el-tab-pane label="充值记录" name="first">
          <!-- 查询表单 -->
          <div style="margin: 20px 0px 0px -10px; padding-bottom: 15px">
            <el-form :inline="true" label-position="right" label-width="80px">
              <el-form-item label="订单时间">
                <el-date-picker
                  v-model="form.input1"
                  style="width: 200px; margin-right: 30px"
                  value-format="yyyy-MM-dd"
                  type="daterange"
                  range-separator="至"
                  clearable
               
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item label="">
                <el-button
                icon="el-icon-refresh"
                style="background: #eeeeee; color: #6396f4; font-weight: bold"
                @click="CommissionBottonForm"
                >重置
              </el-button>
              <el-button type="primary" icon="el-icon-search" @click="getData"
                >搜索</el-button
              >
              </el-form-item>
            </el-form>
           
          </div>
          <el-divider></el-divider>
          <!-- 数据展示 -->
          <el-card style="height: 150px; margin-top: 10px">
            <div
              style="
                display: flex;
                height: 100%;
                justify-content: space-between;
              "
            >
              <div class="pay-item">
                <div class="pay-value" style="color: red">
                  <span>￥</span>
                  {{ chongzhikapian.balance || 0 }}
                </div>
                <div class="pay-label">账户余额(元)</div>
              </div>
              <div class="pay-item">
                <div class="pay-value">
                  <span>￥</span>
                  {{ chongzhikapian.rechargeCount || 0 }}
                </div>
                <div class="pay-label">本月完成打款笔数</div>
              </div>
              <div class="pay-item">
                <div class="pay-value">
                  <span>￥</span>
                  {{ chongzhikapian.rechargeMoney || 0 }}
                </div>
                <div class="pay-label">本月完成打款(元)</div>
              </div>

              <!-- <div class="pay-item">
            <div class="pay-value value-color">
              <span>￥</span>
              {{ remaining }}
            </div>
            <div class="pay-label">剩余未提现(元)</div>
          </div> -->
            </div>
          </el-card>
          <el-divider></el-divider>

          <el-table :data="czjlData" style="width: 100%" height="500">
            <el-table-column prop="orderId" label="流水号" align="center">
            </el-table-column>
            <el-table-column prop="amount" label="金额(元)" align="center">
            </el-table-column>
            <el-table-column
              prop="realAmount"
              label="实际到账金额(元)"
              align="center"
            ></el-table-column>
            <el-table-column prop="status" label="状态" align="center">
              <template slot-scope="scope">
                {{ scope.row.status }}
                <!-- <span v-show="scope.row.status=='0'">失败</span>
                <span v-show="scope.row.status=='1'">成功</span>
                <span v-show="scope.row.status=='2'">充值中</span> -->
              </template>
            </el-table-column>
            <el-table-column
              prop="endDate"
              label="创建时间"
              align="center"
            ></el-table-column>
          </el-table>
          <div>
            <pagination
              style="margin: 0px 0px 30px 0px"
              :total="czjl.total"
              :page.sync="czjl.pageNum"
              :limit.sync="czjl.pageSize"
              @pagination="getData"
            />
          </div>
        </el-tab-pane>
        <!-- 申请记录 -->
        <el-tab-pane label="申请记录" name="secondList">
          <!-- 查询表单 -->
          <div style="margin: 20px 0px 0px -10px; padding-bottom: 15px">
            <el-form :inline="true" label-position="right" label-width="80px">
              <el-form-item label="订单时间">
                <el-date-picker
                  v-model="form.input1"
                  style="width: 200px; margin-right: 30px"
                  value-format="yyyy-MM-dd"
                  type="daterange"
                  range-separator="至"
                  clearable
           
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item label="">
                  <el-button
                icon="el-icon-refresh"
                style="background: #eeeeee; color: #6396f4; font-weight: bold"
                @click="CommissionBottonForm"
                >重置
              </el-button>
              <el-button type="primary" icon="el-icon-search" @click="getData"
                >搜索</el-button
              >
              </el-form-item>
            </el-form>
          
          </div>

          <el-table :data="tableData" style="width: 100%" height="500">
            <!-- <el-table-column type="selection" width="55"> </el-table-column> -->
            <el-table-column prop="time" label="申请时间" align="center">
            </el-table-column>

            <el-table-column
              prop="invoiceTitle"
              label="发票抬头"
              align="center"
            >
            </el-table-column>
            <el-table-column prop="amount" label="发票总额" align="center">
            </el-table-column>
            <el-table-column prop="address" label="税率" align="center">
              6%
            </el-table-column>
            <el-table-column prop="amount" label="税额" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.amount * 0.06 }}</span>
              </template>
            </el-table-column>
          </el-table>
          <div>
            <pagination
              style="margin: 0px 0px 30px 0px"
              :total="ApplicationRecordtotal"
              :page.sync="CommissionData.pageNum"
              :limit.sync="CommissionData.pageSize"
              @pagination="getData"
            />
          </div>
        </el-tab-pane>
           <!-- 开通信息 -->
          <el-tab-pane label="开通信息" name="secondText">
            <el-form
              ref="elForm"
              :model="UnionPay"
              :rules="UnionPayrules"
              size="medium"
              label-width="150px"
              class="secondTextBox"
            >
              <el-row>
                <el-form-item label="企业名称" prop="field101">
                  <el-input
                    v-model="UnionPay.field101"
                    placeholder="请输入企业名称"
                    :maxlength="35"
                    clearable
                    :style="{ width: '100%' }"
                  ></el-input>
                </el-form-item>
                <el-form-item label="纳税人类型" prop="field102">
                  <el-radio-group v-model="UnionPay.field102" size="medium">
                    <el-radio
                      v-for="(item, index) in field102Options"
                      :key="index"
                      :label="item.value"
                      :disabled="item.disabled"
                      >{{ item.label }}</el-radio
                    >
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="纳税人识别号" prop="field103">
                  <el-input
                    v-model="UnionPay.field103"
                    placeholder="请输入纳税人识别号"
                    :maxlength="35"
                    clearable
                  :style="{ width: '100%' }"
                  ></el-input>
                </el-form-item>

                <el-form-item label="单位注册地址及电话" prop="field104">
                  <el-input
                    v-model="UnionPay.field104"
                    placeholder="请输入单位注册地址及电话"
                    :maxlength="70"
                    clearable
                 :style="{ width: '100%' }"
                  ></el-input>
                </el-form-item>
                <el-form-item label="开户行" prop="field105">
                  <el-input
                    v-model="UnionPay.field105"
                    placeholder="请输入开户行"
                    :maxlength="70"
                    clearable
                   :style="{ width: '100%' }"
                  ></el-input>
                </el-form-item>
                <el-form-item label="银行账号" prop="field106">
                  <el-input
                    v-model="UnionPay.field106"
                    placeholder="请输入银行账号"
                    :maxlength="20"
                    clearable
                   :style="{ width: '100%' }"
                  ></el-input>
                </el-form-item>
                <el-form-item label="" style="margin-bottom:200px">
                 <el-button type="primary" @click="UnionPayBotton" style="width:100px">
                    提交
                  </el-button>
                </el-form-item>
                <!-- <el-col :span="20" align="center">
                  <el-button type="primary" @click="UnionPayBotton">
                    提交
                  </el-button>
                </el-col> -->
              </el-row>
            </el-form>
          </el-tab-pane>
            <!-- 邮寄地址 -->
          <el-tab-pane label="邮寄地址" name="secondSite">
            <el-form
              ref="communicationData"
              :model="communicationData"
              label-width="140px"
              style="margin-top: 20px"
              :rules="communicationrules"
               class="secondTextBox"
            >
              <el-row>
                <!-- <el-col :offset="3"> -->
                  <el-form-item label="详细地址" prop="field101">
                    <el-input
                      maxlength="80"
                      onkeyup="this.value=this.value.replace(/[, ]/g,'')"
                      v-model="communicationData.field101"
                      class="inputStyle"
                      placeholder="请输入详细地址"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="收件人名称" prop="field102">
                    <el-input
                      maxlength="10"
                      onkeyup="this.value=this.value.replace(/[, ]/g,'')"
                      v-model="communicationData.field102"
                      class="inputStyle"
                       placeholder="请输入收件人名称"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="联系电话" prop="field103">
                    <el-input
                      maxlength="11"
                      onkeyup="this.value=this.value.replace(/[, ]/g,'')"
                      v-model="communicationData.field103"
                      class="inputStyle"
                      placeholder="请输入联系电话"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="" style="margin-bottom:360px">
                 <el-button type="primary" @click="communication" style="width:100px">
                    确定
                  </el-button>
                  </el-form-item>
                <!-- </el-col> -->
               
              </el-row>
            </el-form>
          </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import {
  selectCapWithdrawalRecordList,
  invoiceApply,
  getinvoiceApply,
  editinvoiceApply,
  addinvoicePost,
  getinvoicePost,
  editinvoicePost,
  addcompanyInfo,
  getinvoiceApplyList,
  rechargeList,
  getcompanyInfo,
  editcompanyInfo,
  rechargeListStatistics,
} from "@/api/finance/index.js";
export default {
  data() {
    return {
      //标题名称
      headName:'',
      //充值记录分页器
      czjl: {
        total: 0,
        pageNum: 1,
        pageSize: 10,
      },
      // 充值记录列表数据
      czjlData: [],
      //申请记录分页器
      ApplicationRecordtotal: 0,
      pickerOptions0: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e6;
        },
      },
      //失败原因
      fieldptions: [
        { label: "1", value: "2" },
        { label: "1", value: "2" },
      ],
      //发佣记录列表
      roleList: [],
      total: 0,
      //本页面的ID数据
      paramData: {
        balance: "", //账户余额
        count: "", //本月打款笔数
        id: "",
        name: "", //名称
        totalMoney: "", //本月完成打款
      },
      // 发佣搜索
      CommissionData: {
        field103: [],
        field105: undefined,
        mobile: "",
        field104: undefined,
        field106: undefined,
        field107: undefined,
        field108: undefined,
        field109: undefined,
        field110: undefined,
        field111: undefined,
        field101: undefined,
        pageSize: 10,
        pageNum: 1,
        total: 0,
      },
      CommissionRules: {
        field103: [],
        field105: [],
        mobile: [
          {
            pattern: /^1(3|4|5|7|8|9)\d{9}$/,
            message: "手机号格式错误",
            trigger: "blur",
          },
        ],
        field104: [],
        field106: [],
        field107: [],
        field108: [],
        field109: [],
        field110: [],
        field111: [
          {
            pattern:
              /^([1-6][1-9]|50)\d{4}(18|19|20)\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
            message: "身份证格式错误",
            trigger: "blur",
          },
        ],
        field101: [],
      },
      field105Options: [
        {
          label: "支付宝",
          value: 0,
        },
        {
          label: "银行卡",
          value: 1,
        },
        {
          label: "其他",
          value: 2,
        },
      ],
      field107Options: [
        {
          label: "成功",
          value: "SUCCESS",
        },
        {
          label: "失败",
          value: "FAIL",
        },
        // {
        //   label: "转账中",
        //   value:"转账中",
        // },
      ],
      field101Options: [
        {
          label: "支付宝",
          value: 0,
        },
        {
          label: "银行卡",
          value: 1,
        },
        {
          label: "其他",
          value: 2,
        },
      ],
      //开通信息参数
      UnionPay: {
        field101: undefined,
        field102: 1,
        field103: undefined,
        // mobile: '',
        field104: undefined,
        field105: undefined,
        field106: undefined,
        id: "",
      },
      field102Options: [
        {
          label: "一般纳税人",
          value: 1,
        },
        {
          label: "小规模纳税人",
          value: 2,
        },
      ],
      UnionPayrules: {
        field101: [
          {
            required: true,
            message: "请输入企业名称",
            trigger: "blur",
          },
        ],
        field102: [
          {
            required: true,
            message: "纳税人类型不能为空",
            trigger: "change",
          },
        ],
        field103: [
          {
            required: true,
            message: "请输入纳税人识别号",
            trigger: "blur",
          },
        ],
        // mobile: [{
        //   required: true,
        //   message: '请输入手机号',
        //   trigger: 'blur'
        // }, {
        //   pattern: /^1(3|4|5|7|8|9)\d{9}$/,
        //   message: '手机号格式错误',
        //   trigger: 'blur'
        // }],
        field104: [
          {
            required: true,
            message: "请输入单位注册地址及电话",
            trigger: "blur",
          },
        ],
        field105: [
          {
            required: true,
            message: "请输入开户行",
            trigger: "blur",
          },
        ],
        field106: [
          {
            required: true,
            message: "请输入银行账号",
            trigger: "blur",
          },
        ],
      },
      //发票申请
      formData: {
        field101: undefined,
        field102: undefined,
        field103: undefined,
        mobile: "",
        field104: "",
        field105: "",
      },
      rules: {
        field102: [
          {
            required: true,
            message: "请输入发票抬头",
            trigger: "blur",
          },
        ],
        field103: [],
        // mobile: [
        //   {
        //     pattern: /^1(3|4|5|7|8|9)\d{9}$/,
        //     message: "手机号格式错误",
        //     trigger: "blur",
        //   },
        // ],
        field104: [
          {
            required: true,
            message: "请输入金额",
            trigger: "blur",
          },
          {
            pattern:
              /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,
            message: "金额格式错误",
            trigger: "blur",
          },
        ],
        field105: [
          {
            required: true,
            message: "请输入税号",
            trigger: "blur",
          },
        ],
      },
      communicationrules: {
        field101: [
          {
            required: true,
            message: "请输入详细地址",
            trigger: "change",
          },
        ],
        field102: [
          {
            required: true,
            message: "请输入收件人名称",
            trigger: "change",
          },
        ],
        field103: [
          {
            required: true,
            message: "请输入联系电话",
            trigger: "change",
          },
          {
            pattern: /^1(3|4|5|7|8|9)\d{9}$/,
            message: "联系方式格式错误",
            trigger: "change",
          },
        ],
      },

      pickerOptions0: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e6;
        },
      },
      value: "",
      options: [{ label: "label", value: "1" }],
      options1: [{ label: "银行卡", value: "1" }],
      showTan2: false,
      //申请记录列表
      tableData: [],
      form: {
        region: "",
        input1: [],
      },
      //通讯记录参数
      communicationData: {
        field101: "",
        field102: "",
        field103: "",
        id: "",
      },
      form1: {},
      activeName: "Commission",
      activeName1: "first1",
      //充值记录卡片
      chongzhikapian: {
        rechargeMoney: "",
        rechargeCount: "",
        balance: "",
      },
      //是否显示发用记录以外的导航
      nameCode: "",
      userId: "",
    };
  },
  created() {
    const userID = sessionStorage.getItem("userID");
    this.userId = userID - 0;
    this.headName=this.$route.query.name;
    this.getData();
  },
  methods: {
    //邮寄地址查
   async send(){
          //获取邮寄地址信息
      const getAddress = await getinvoicePost({ wkxxId: this.paramData.id });

      console.log(getAddress.data, "获取邮寄地址");
      console.log(getAddress, "获取邮寄地址");
      if (getAddress.data != undefined) {
        this.communicationData.field101 = getAddress.data.address; //收件地址
        this.communicationData.field102 = getAddress.data.recipientName; //姓名
        this.communicationData.field103 = getAddress.data.phone; //电话
        this.communicationData.id = getAddress.data.id; //id
      }
    },
     //邮寄地址确定按钮
    async communication() {
      console.log(this.communicationData, "通讯记录确定按钮");
      this.$refs["communicationData"].validate(async (valid) => {
        if (valid) {

//           {
 
//   "endTime": "string",
//   "id": 0,
//   "pageNum": 0,
//   "pageSize": 0,

//   "signAccountId": 0,
//   "startTime": "string"
// }
          let param = {
              phone: this.communicationData.field103, //电话
            address: this.communicationData.field101, //地址
          
            recipientName: this.communicationData.field102, //名称
            wkxxId: this.paramData.id, //当前页面ID
            id: this.communicationData.id,
          };
         
            const addcommunicationData = await addinvoicePost(param);
            if (addcommunicationData.code == 200) {
              this.$message({
                message: "提交成功",
                type: "success",
              });
            } else {
              this.$message.error("操作失败");
            }
            console.log(addcommunicationData, "新增邮寄地址");
          
          this.getData();
        }
        // TODO 提交表单
      });
    },
     //邮寄地址确定按钮
    async communication2() {
      console.log(this.communicationData, "通讯记录确定按钮");
      this.$refs["communicationData"].validate(async (valid) => {
        if (valid) {
          let param = {
            address: this.communicationData.field101, //地址
            phone: this.communicationData.field103, //电话
            recipientName: this.communicationData.field102, //名称
            wkxxId: this.paramData.id, //当前页面ID
            id: this.communicationData.id,
          };
          if (this.communicationData.id) {
            const editcommunicationData = await editinvoicePost(param);
            if (editcommunicationData.code == 200) {
              this.$message({
                message: "提交成功",
                type: "success",
              });
            } else {
              this.$message.error("操作失败");
            }
            console.log(editcommunicationData, "编辑邮寄地址");
          } else {
            const addcommunicationData = await addinvoicePost(param);
            if (addcommunicationData.code == 200) {
              this.$message({
                message: "提交成功",
                type: "success",
              });
            } else {
              this.$message.error("操作失败");
            }
            console.log(addcommunicationData, "新增邮寄地址");
          }
          this.getData();
        }
        // TODO 提交表单
      });
    },
    async getData() {
      //获取发票申请记录
      console.log(this.form.input1, "搜索日期");
      let paraminvoiceApply = {
        // createTime:this.form.input1[0],
        // invoiceTitle:this.form.input1[1],
        pageSize: this.CommissionData.pageSize,
        pageNum: this.CommissionData.pageNum,
      };
      const { data } = await getinvoiceApplyList(paraminvoiceApply);

      console.log(data, "获取发票申请记录列表");
      this.tableData = data.list;
      console.log(data.list.length, "998877666");
      this.ApplicationRecordtotal = data.total;

      //获取这个页面自己的ID信息
      this.paramData = JSON.parse(sessionStorage.getItem("row"));

  

      let param = {
        beginDate: this.CommissionData.field103[0], //"开始时间"
        endDate: this.CommissionData.field103[1], //"结果时间"

        phone: this.CommissionData.mobile, //"手机号"
        withdrawalStatus: this.CommissionData.field107, //"提现状态"
        userName: this.CommissionData.field104, //"用户名称"
        nickName: this.CommissionData.field106, //"用户昵称"
        channelName: this.CommissionData.field108, //"渠道名称"
        accountName: this.CommissionData.field109, //"收款户名"
        accountNo: this.CommissionData.field110, //"收款账户"
        idCard: this.CommissionData.field111, //"身份证号"

        channelId: this.paramData.id,
        withdrawalType: "1", //0记账本 1银联  2支付宝
        pageNum: this.CommissionData.pageNum,
        pageSize: this.CommissionData.pageSize,
      };

      const dataList = await selectCapWithdrawalRecordList(param);
      console.log(dataList, "获取发佣列表");
      this.roleList = dataList.list;
      this.CommissionData.total = dataList.total;

      //获取开通信息
      const getcompany = await getcompanyInfo(this.paramData.id);
      console.log(getcompany, "获取开通信息");
      if (getAddress.data != undefined) {
        this.UnionPay.field106 = getcompany.data.bankAccount; //银行账号
        this.UnionPay.field101 = getcompany.data.corporateName; //企业名称
        this.UnionPay.id = getcompany.data.id;
        this.UnionPay.field105 = getcompany.data.openingBank; //开户行
        this.UnionPay.field104 = getcompany.data.phone; //电话
        this.UnionPay.field103 = getcompany.data.taxpayerId; //纳税人识别号
        this.UnionPay.field102 = getcompany.data.taxpayerType; //纳税人类型  1 一般纳税人 2小规模纳税人
      }

      //获取充值记录统计
      let rechargeparam = {
        beginDate: this.form.input1[0],
        endDate: this.form.input1[1],
        userId: this.userId,
        wkxxId: this.paramData.id,
      };

      const rechargeStatistics = await rechargeListStatistics(rechargeparam);
      console.log(rechargeStatistics, "充值记录统计");
      this.chongzhikapian.balance = rechargeStatistics.data.balance; //账户余额
      this.chongzhikapian.rechargeCount = rechargeStatistics.data.rechargeCount; //打款笔数
      this.chongzhikapian.rechargeMoney = rechargeStatistics.data.rechargeMoney; //本月完成打款

      console.log(this.CommissionData.pageNum, "第一页");
      console.log(this.CommissionData.pageSize, "10条一页");

      let Rechargeparam = {
        wkxxId: this.paramData.id,
        beginDate: this.form.input1[0],
        endDate: this.form.input1[1],
        pageNum: this.CommissionData.pageNum,
        pageSize: this.CommissionData.pageSize,
      };
      //获取充值记录
      const RechargeList = await rechargeList(Rechargeparam);
      console.log(RechargeList, "获取充值记录");
      this.czjlData = RechargeList.list;
      this.czjl.total = RechargeList.total;
    },
    //发票申请
    submitForm() {
      this.$refs["formData"].validate(async (valid) => {
        if (valid) {
          console.log(this.formData, "发票申请按钮");
          let param = {
            address: this.formData.field103, //地址
            phone: this.formData.mobile, //电话
            invoiceTitle: this.formData.field102, //发票抬头
            amount: this.formData.field104, //金额
            dutyParagraph: this.formData.field105, //税号
            wkxxId: this.paramData.id, //当前页面详情的IDv
            id: this.paramData.id,
          };

          const data = await invoiceApply(param);
          if (data.code == 200) {
            this.$message({
              message: "提交成功",
              type: "success",
            });
            this.getData();
          } else {
            this.$message.error("操作失败");
          }
          //如果等于空就新增，不等于空就是编辑
          // if (this.formData.field101 == "") {

          // } else {
          //   const editData = await editinvoiceApply(param);
          //   if (editData.code == 200) {
          //     this.$message({
          //       message: "提交成功",
          //       type: "success",
          //     });
          //     this.getData();
          //   } else {
          //     this.$message.error("操作失败");
          //   }
          // }

          console.log(data, "发票申请返回结果");
        }
        // TODO 提交表单
        this.close();
      });
    },
    //搜索按钮
    CommissionBotton() {
      this.$refs["CommissionData"].validate((valid) => {
        if (valid) {
          console.log(this.CommissionData, "搜索数据");
        }
        // TODO 提交表单
      });
    },
    CommissionBottonForm() {
     this.CommissionData={
        field103: [],
        field105: undefined,
        mobile: "",
        field104: undefined,
        field106: undefined,
        field107: undefined,
        field108: undefined,
        field109: undefined,
        field110: undefined,
        field111: undefined,
        field101: undefined,
        pageSize: 10,
        pageNum: 1,
        total: 0,
      },
      this.form.input1=[];
     this.getData();
    },
   
    //开通信息编辑按钮
    UnionPayBotton() {
      this.$refs["elForm"].validate(async (valid) => {
        if (valid) {
          console.log(this.UnionPay, "提交按钮");
          let param = {
            // address: "string",
            bankAccount: this.UnionPay.field106, //银行账号
            corporateName: this.UnionPay.field101, //企业名称
            id: this.UnionPay.id,
            openingBank: this.UnionPay.field105, //开户行
            phone: this.UnionPay.field104, //电话
            taxpayerId: this.UnionPay.field103, //纳税人识别号
            taxpayerType: this.UnionPay.field102, //纳税人类型  1 一般纳税人 2小规模纳税人
            wkxxId: this.paramData.id,
          };

          if (this.UnionPay.id) {
            const editcompany = await editcompanyInfo(param);
            console.log(editcompany, "编辑开通信息");
            if (editcompany.code == 200) {
              this.$message({
                message: "提交成功",
                type: "success",
              });
            } else {
              this.$message.error("操作失败");
            }
          } else {
            const addcompanyInfo = await addcompanyInfo(param);
            console.log(addcompanyInfo, "新增开通信息");
            if (addcompanyInfo.code == 200) {
              this.$message({
                message: "提交成功",
                type: "success",
              });
            } else {
              this.$message.error("操作失败");
            }
          }
          this.getData();
        }
        this.close();
      });
    },

    resetForm() {
      this.$refs["formData"].resetFields();
    },
    async handleClick(tab, event) {
     
      console.log(tab.index);
      if (tab.index == "4") {

      }
    },
  },
};
</script>

<style scoped>
.secondTextBox{
  /* border: 1px red solid; */
  display: flex;
  justify-content: center;
}
.exportButton {
  /* border: 1px red solid; */
  display: flex;
  justify-content: flex-end;
}
.el-form-item__label {
  font-weight: 500;
}
</style>
<style>
.pay .el-date-editor .el-range-separator {
  width: 15%;
}

.pay .el-card__body {
  height: 100%;
}

.pay .pay-item {
  width: 45%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.pay .pay-item:not(:last-child) {
  border-right: 1px solid #f0f0f0;
}

.pay .pay-item .pay-value {
  font-size: 24px;
  font-weight: bold;
}

.pay .pay-item .pay-value span {
  font-size: 10px;
  margin-right: -5px;
}

.pay .pay-item .value-color {
  color: #3a77f6;
}

.pay .pay-item .pay-label {
  font-size: 11px;
  margin-top: 10px;
}

.pay .el-divider--horizontal {
  background: #f0f0f0;
}

.pay .el-card__header {
  margin: 0 20px;
  padding-left: 0px;
}

.pay .el-tabs__nav-wrap::after {
  height: 0;
}
</style>
